<template>
  <div class="app-container" id="addgoods">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0px">
        <el-form :inline="true" class="search-form" label-width="100px">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item label="售后单号" style="margin: 5px 0">
                <el-input clearable placeholder="请输入售后单号" v-model="searchForm.refund_order_no"
                  onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item label="商品订单号" style="margin: 5px 0">
                <el-input clearable placeholder="请输入商品订单号" v-model="searchForm.order_trade_no" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item label="支付单号" style="margin: 5px 0" v-if="searchDisplay">
                <el-input clearable placeholder="请输入支付单号" v-model="searchForm.pay_order_no" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="支付方式" style="margin: 5px 0">
                <el-select clearable v-model="searchForm.pay_service" placeholder="请选择支付方式">
                  <el-option v-for="item in [
                    { name: '余额支付', id: 1 },
                    { name: '支付宝', id: 2 },
                    { name: '微信', id: 3 },
                  ]" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="售后状态" style="margin: 5px 0" v-if="searchDisplay">

                <el-select clearable v-model="searchForm.status" placeholder="请选择售后状态">
                  <el-option v-for="item in [
                    { name: '发起申请', id: 0 },
                    { name: '处理中', id: 1 },
                    { name: '处理完成', id: 2 },
                    { name: '审核未通过', id: 3 },
                    { name: '取消申请', id: 4 },
                  ]" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="用户ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入用户ID" v-model="searchForm.user_id" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="收货人电话" style="margin: 5px 0">
                <el-input clearable placeholder="请输入收货人电话" v-model="searchForm.phone_number" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="收货人姓名" style="margin: 5px 0">
                <el-input clearable placeholder="请输入收货人姓名" v-model="searchForm.recipient" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="商品名称" style="margin: 5px 0">
                <el-input clearable placeholder="请输入商品名称" v-model="searchForm.goods_name" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="商品ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入商品ID" v-model="searchForm.goods_id" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>

              <el-form-item v-if="searchDisplay" label="供货商ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入供货商ID" v-model="searchForm.supplier_id" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="店铺/商户ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入店铺/商户ID" v-model="searchForm.mer_id" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="申请起始时间" style="margin: 5px 0">
                <el-date-picker v-model="create_time" type="datetimerange" @change="create_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="审核起始时间" style="margin: 5px 0">
                <el-date-picker v-model="verify_time" type="datetimerange" @change="verify_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="退款截至时间" style="margin: 5px 0">
                <el-date-picker v-model="complete_time" type="datetimerange" @change="complete_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item v-if="searchDisplay" label="支付起始时间" style="margin: 5px 0">
                <el-date-picker v-model="pay_time" type="datetimerange" @change="pay_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                  @click="searchDisplay = true">展开</el-button>
                <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20"> </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="getListWay"></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col class="with_search_card">
          <el-table highlight-current-row :data="RefundList" :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" style="width: 100%" v-loading="loading" height="100%">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
              min-width="80" align="center">
              <template slot-scope="scope">
                <div v-if="fruit == 'user_avatar' || fruit == 'goods_main_image'"
                  style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image v-if="scope.row[fruit]" :src="scope.row[fruit]" :preview-src-list="[scope.row[fruit]]" />
                </div>
                <div v-else-if="fruit == 'apply_imgs'" style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image :src="scope.row[fruit][0]" :preview-src-list="scope.row[fruit]">
                  </el-image>
                </div>
                <div v-else-if="fruit == 'type'">
                  <div style="color: #0076f6;" v-if="scope.row[fruit] == 1">仅退款</div>
                  <div style="color: #0076f6;" v-if="scope.row[fruit] == 2">退货退款</div>
                  <div style="color: #0076f6;" v-if="scope.row[fruit] == 3">换货</div>
                </div>
                <div v-else-if="fruit == 'addr_province_name'">
                  {{ scope.row.addr_province_name }}
                  {{ scope.row.addr_city_name }}
                  {{ scope.row.addr_district_name }}
                </div>
                <div v-else-if="fruit == 'shouhoujilu'">
                  <el-button @click="recordDialogWay(scope.row)" style="margin: 5px" type="text" size="mini">
                    查看
                  </el-button>
                </div>
                <div v-else-if="fruit == 'trade_no'">
                  {{ scope.row.order_detail.trade_no }}
                </div>
                <span v-else>
                  <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="售后状态">
              <template slot-scope="scope">
                <div style="color: #ff4949;" v-if="scope.row.status == 0 && scope.row.is_lock == 0">待处理</div>
                <div style="color: #0076f6;" v-if="scope.row.status == 1">处理中</div>
                <div style="color: #81b337;" v-if="scope.row.status == 2">处理完成</div>
                <div style="color: #ff4949;" v-if="scope.row.status == 3">已驳回</div>
                <div style="color: #81b337;" v-if="scope.row.status == 4">取消申请</div>
                <div style="color: #ff4949;" v-if="scope.row.status == 0 && scope.row.is_lock == 1">已锁定</div>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="150" prop="address" label="操作">
              <template slot-scope="scope">
                <el-button @click="detailsDrawerWay(scope.row)" type="text">
                  详情
                </el-button>
                <el-button type="text" v-if="scope.row.status == 0
                  || (scope.row.status == 1 && scope.row.aupplier_status == 0 && scope.row.user_status == 1)
                  || (scope.row.status == 1 && scope.row.aupplier_status == 1 && scope.row.user_status == 1)"
                  @click="detailsDrawerWay(scope.row)">
                  审核
                </el-button>
                <!-- v-if="scope.row.status == 0 && scope.row.is_lock == 0" -->
                <!-- <el-button v-if="scope.row.status == 0 && scope.row.is_lock == 1" style="margin: 5px" type="info"
                  size="mini">
                  待客户重新上传
                </el-button>
                <el-button v-hasPermi="'platformorder/aftersales/confirm_return'" v-if="
                    scope.row.status == 1 &&
                    scope.row.type == 2 &&
                    scope.row.user_status == 1 &&
                    scope.row.supply_status != 1
                  " style="margin: 5px" type="warning" size="mini" @click="confirmHandle(scope.row)">
                  确认寄回
                </el-button>
                <el-button v-if="
                    scope.row.status == 1 &&
                    scope.row.type == 2 &&
                    scope.row.user_status == 0
                  " style="margin: 5px" type="info" size="mini">
                  等待客户寄回
                </el-button>
                <el-button v-hasPermi="'platformorder/aftersales/confirm_exchange'" v-if="
                    scope.row.status == 1 &&
                    scope.row.type == 3 &&
                    !scope.row.new_product_id
                  " style="margin: 5px" type="warning" size="mini" @click="exchangeHandle(scope.row)">
                  确认换货
                </el-button>
                <el-button v-if="
                    scope.row.status == 1 &&
                    scope.row.type == 3 &&
                    scope.row.new_product_id
                  " style="margin: 5px" type="info" size="mini">
                  等待客户收货
                </el-button>
                <el-button v-hasPermi="'platformorder/aftersales/refund'" v-if="
                    scope.row.status == 1 &&
                    scope.row.type == 2 &&
                    scope.row.supply_status == 1
                  " style="margin: 5px" type="warning" size="mini" @click="refundHandle(scope.row)">
                  退款
                </el-button>
                <el-button v-if="scope.row.status !== 1 && scope.row.status !== 0" style="margin: 5px" type="success"
                  size="mini">
                  已处理
                </el-button> -->

              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.pageSize"
          @pagination="getListWay" />
      </el-row>
    </div>

    <!-- 审核弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="审核" size="50%" :withHeader="false"
      :visible.sync="aftersalesDialog" @close="aftersalesClose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>审核</span>
          <div class="close" @click="aftersalesClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-alert class="warningtips" title="说明：当前表单是根据售后类型进行展示与处理!" type="warning" :closable="false">
      </el-alert>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">
        <el-row style="position: relative" v-loading="aftersalesLoading">
          <el-form label-width="110px" :model="aftersalesForm" :rules="aftersalesRules" ref="aftersalesForm">
            <el-col :span="22">
              <el-form-item label="售后类型：">
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 1">仅退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 2">退货退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 3">换货</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="审核状态" prop="status">
                <el-radio-group @change="statusWay" v-model="aftersalesForm.status">
                  <el-radio :label="1">同意</el-radio>
                  <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="aftersalesForm.status == 2">
              <el-form-item label="是否锁定订单" prop="is_lock">
                <el-radio-group v-model="aftersalesForm.is_lock">
                  <el-radio :label="1">锁定</el-radio>
                  <el-radio :label="0">不锁定</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22" v-if="aftersalesForm.status == 1 && orderInfo.type != 1">
              <el-form-item label="退回渠道" prop="return_type">
                <el-radio-group @change="return_typeChange" v-model="aftersalesForm.return_type">
                  <el-radio :label="1">退回给平台</el-radio>
                  <el-radio :label="2">退回给原供货商({{ orderInfo.supplier_name }})</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22" v-if="
               aftersalesForm.status == 1 &&
               orderInfo.type !== 1 &&
               aftersalesForm.return_type == 2
             ">
              <el-form-item label="退回地址" prop="return_address_id">
                <el-select v-loading="supplierLoading" element-loading-spinner="el-icon-loading" style="width: 100%"
                  v-model.trim="aftersalesForm.return_address_id" placeholder="请选择退回地址">
                  <el-option v-for="item in supplierAddressList" :key="item.id" :label="
                     item.province_name +
                     item.district_name +
                     item.city_name +
                     item.address_details
                   " :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="22" v-if="
               aftersalesForm.status == 1 &&
               orderInfo.type !== 1 &&
               aftersalesForm.return_type == 1
             ">
              <el-form-item label="平台地址" prop="return_address_id">
                <el-select v-loading="supplierLoading" element-loading-spinner="el-icon-loading" style="width: 100%"
                  v-model.trim="aftersalesForm.return_address_id" placeholder="请选择平台收货地址">
                  <el-option v-for="item in supplierAddressList" :key="item.id" :label="
                     item.province_name +
                     item.district_name +
                     item.city_name +
                     item.address_details
                   " :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="审核备注">
                <el-input type="textarea" placeholder="请输入备注" maxlength="200" show-word-limit clearable
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="aftersalesForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button @click="aftersalesDialog = false">取消</el-button>
        <el-button type="primary" @click="aftersalesSubmit">保存</el-button>
      </el-col>
    </el-drawer>

    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="确认收货" size="50%" :withHeader="false"
      :visible.sync="confirmDialog" @close="confirmClose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>确认收货</span>
          <div class="close" @click="confirmClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-alert class="warningtips" title="说明：当前表单是根据售后类型进行展示与处理!" type="warning" :closable="false">
      </el-alert>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">
        <el-row style="position: relative" v-loading="confirmLoading">
          <el-form label-width="110px" :model="confirmForm" :rules="confirmRules" ref="confirmForm">
            <el-col :span="22">
              <el-form-item label="售后类型：">
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 1">仅退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 2">退货退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 3">换货</span>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="收到货物数量" prop="refund_number">
                <el-input type="text" placeholder="请输入收到货物数量" show-word-limit clearable
                  v-model.trim="confirmForm.refund_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="货物图片">
                <logo-upload :file-list="imgs" :show-file-list="true" accept="image/jpeg, image/png"
                  @uploadCallback="imgsCallback" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="备注">
                <el-input type="textarea" placeholder="请输入备注" maxlength="200" show-word-limit clearable
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="confirmForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button @click="confirmDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit">确定</el-button>
      </el-col>
    </el-drawer>
    <!-- 确认收货弹框 -->


    <!-- 确认换货弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="确认换货" size="50%" :withHeader="false"
      :visible.sync="exchangeDialog" @close="exchangeClose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>确认换货</span>
          <div class="close" @click="exchangeClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-alert class="warningtips" title="说明：当前表单是根据售后类型进行展示与处理!" type="warning" :closable="false">
      </el-alert>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">
        <el-row style="position: relative" v-loading="exchangeLoading">
          <el-form label-width="110px" :model="exchangeForm" :rules="exchangeRules" ref="exchangeForm">
            <el-col :span="22">
              <el-form-item label="售后类型：">
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 1">仅退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 2">退货退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 3">换货</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="商品" prop="goodsId">
                <el-select v-model="goodsId" filterable remote reserve-keyword @change="exchangeGoodsWay"
                  placeholder="根据商品名、ID、编码查询" :remote-method="remoteMethod" :loading="exchangeSelectloading">
                  <el-option v-for="item in GoodsList" :key="item.id" :label="item.name" :value="item.product">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="商品数量" prop="buy_number">
                <el-input type="text" placeholder="请输入商品数量" show-word-limit clearable
                  v-model.trim="exchangeForm.buy_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="备注">
                <el-input type="textarea" placeholder="请输入备注" maxlength="200" show-word-limit clearable
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="exchangeForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button @click="exchangeDialog = false">取消</el-button>
        <el-button :loading="aftersalesLoading" type="primary" @click="exchangeSubmit">确定</el-button>
      </el-col>
    </el-drawer>


    <!-- 退款弹框弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="退款信息" size="50%" :withHeader="false"
      :visible.sync="refundDialog" @close="refundclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>退款信息</span>
          <div class="close" @click="refundclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-alert class="warningtips" title="说明：当前表单是根据售后类型进行展示与处理!" type="warning" :closable="false">
      </el-alert>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">
        <el-row style="position: relative" v-loading="refundLoading">
          <el-form label-width="100px" :model="refundform" :rules="refundRules" ref="refundform">
            <el-col :span="22">
              <el-form-item label="售后类型：">
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 1">仅退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 2">退货退款</span>
                <span style="color: #303030;font-weight: 600;" v-if="detailsInfo.type == 3">换货</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="退单数量" prop="refund_number">
                <el-input type="Number" min="0" placeholder="请输入退单数量" show-word-limit
                  v-model.trim="refundform.refund_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="退款金额" prop="price_total">
                <el-input type="Number" min="0" placeholder="请输入退款金额" show-word-limit
                  v-model.trim="refundform.price_total"></el-input>
                  <span style="font-size: 12px;color: #ff3125;">订单金额{{orderform.price_total}}</span>
              </el-form-item>

            </el-col>
            <el-col :span="11">
              <el-form-item label="退款积分" prop="points_total">
                <el-input type="Number" min="0" placeholder="请输入退款积分" show-word-limit
                  v-model.trim="refundform.points_total"></el-input>
                  <span style="font-size: 12px;color: #ff3125;">订单积分{{orderform.points_total}}</span>
              </el-form-item>

            </el-col>
            <el-col :span="11">
              <el-form-item label="退款提货券" prop="coupon_total">
                <el-input type="Number" min="0" placeholder="请输入退款提货券" show-word-limit
                  v-model.trim="refundform.coupon_total"></el-input>
                  <span style="font-size: 12px;color: #ff3125;">订单提货券{{orderform.coupon_total}}</span>
              </el-form-item>

            </el-col>
            <el-col :span="22">
              <el-form-item label="备注">
                <el-input type="textarea" placeholder="请输入备注" maxlength="200" show-word-limit
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="refundform.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button @click="refundDialog = false">取消</el-button>
        <el-button :loading="refundLoading" type="primary" @click="refundSubmit">确定</el-button>
      </el-col>
    </el-drawer>

    <el-dialog title="协商记录" :close-on-click-modal="false" :append-to-body="true" :visible.sync="recordDialog"
      width="500px">
      <el-row :gutter="20" style="position: relative" v-loading="recordLoading">
        <el-col :span="22" v-if="recordList.length !== 0">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in recordList" :key="index" :timestamp="item.created_at"
              placement="top">
              <el-card>
                <el-descriptions :column="2">
                  <el-descriptions-item label="处理来源">
                    <el-tag size="mini" v-if="item.from_type == 1">平台</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 2">供货商</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 3">用户</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="日志类别">
                    <el-tag size="mini" v-if="item.from_type == 1">普通日志</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 2">退回地址记录</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 3">商品寄回日志</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 4">商品发货日志</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2">
                    {{ item.remark }}
                  </el-descriptions-item>

                  <el-descriptions-item label="图片" v-if="item.imgs.length !== 0">
                    <div v-for="(items, indexs) in item.imgs" :key="indexs"
                      style="width: 30px; height: 30px; margin: 5px">
                      <el-image v-if="items" :src="items" :preview-src-list="[items]" />
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-empty v-else description="暂无记录"></el-empty>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="recordLoading" type="primary" @click="recordDialog = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="70%" :withHeader="false"
      :visible.sync="detailsDrawer" @close="addressClose" :show-close="true">
      <div style="position: relative" v-loading="detailsLoading">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 105px)">
          <div class="drawerTitle">
            <span>售后订单详情</span>
            <div class="close" @click="addressClose">
              <i class="el-icon-close" style="font-size: 24px;"></i>
            </div>
          </div>

          <div class="drawerContent" style="padding: 20px 30px;">
            <div class="refund_tracking_number">售后单号：{{detailstrfund.refund_order_no}}</div>
            <div class="after_sales_status">
              <div class="status">
                <span class="after_sales">售后状态</span>
                <span v-if="detailstrfund.status == 0 && detailstrfund.is_lock == 0" class="orderstatus">待处理</span>
                <span v-if="detailstrfund.status == 0 && detailstrfund.is_lock == 1" class="orderstatus">已锁定</span>
                <span v-if="detailstrfund.status == 1" class="orderstatus">处理中</span>
                <span v-if="detailstrfund.status == 2" class="orderstatus">处理完成</span>
                <span v-if="detailstrfund.status == 3" class="orderstatus">已驳回</span>
                <span v-if="detailstrfund.status == 4" class="orderstatus">取消申请</span>
              </div>
              <div class="status">
                <span class="after_sales">售后人员</span>
                <span>-</span>
              </div>
              <div class="status" style="width: 200px;">
                <span class="after_sales">售后时间</span>
                <span>{{detailstrfund.created_at}}</span>
              </div>
              <div style="flex: 1;"></div>
              <div>
                <el-button v-if="detailstrfund.status == 0 && detailstrfund.is_lock == 0" style="margin: 5px"
                  type="primary" size="mini" @click="drawerHandle(detailsInfo)">
                  审核
                </el-button>
                <el-button v-if="
                    detailstrfund.status == 1 &&
                    detailstrfund.type == 2 &&
                    detailstrfund.user_status == 1 &&
                    detailstrfund.supply_status != 1
                  " style="margin: 5px" type="warning" size="mini" @click="confirmHandle(detailsInfo)">
                  确认寄回
                </el-button>
                <el-button v-if="
                    detailstrfund.status == 1 &&
                    detailstrfund.type == 3 &&
                    !detailstrfund.new_product_id
                  " style="margin: 5px" type="warning" size="mini" @click="exchangeHandle(detailsInfo)">
                  确认换货
                </el-button>
                <el-button v-if="
                    detailstrfund.status == 1 &&
                    detailstrfund.type == 2 &&
                    detailstrfund.supply_status == 1
                  " style="margin: 5px" type="warning" size="mini" @click="refundHandle(detailsInfo)">
                  退款
                </el-button>

              </div>
            </div>
            <div class="tabsView">
              <el-tabs v-model="activeNames" @tab-click="infotabshandleClick">
                <el-tab-pane label="订单详情" name="order_details"></el-tab-pane>
                <el-tab-pane label="售后信息" name="refound_information"></el-tab-pane>
              </el-tabs>
            </div>
            <div v-if="activeNames == 'order_details'">
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">会员信息</div>
                </div>
                <div class="right"></div>
              </div>
              <div style="padding: 0 10px">
                <el-descriptions :column="2">
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="会员昵称">
                    <span style="color: #0076f6;font-weight: 500;">
                      {{
                    detailsInfodent.user ? detailsInfodent.user.nickname : "-"

                  }}</span></el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="联系电话">
                    {{
                     detailsInfodent.user ? detailsInfodent.user.mobile : "-"
                   }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">会员收货信息</div>
                </div>
                <div class="right"></div>
              </div>
              <div style="padding: 0 10px;">
                <el-descriptions :column="2">
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="配送方式">
                    快递</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="联系电话">
                    {{
                    order_address.phone_number ? order_address.phone_number : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="收货人">
                    {{
                    order_address.recipient ? order_address.recipient : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="收货地址">
                    <el-tooltip placement="top-start"
                      :content="order_address.province_name +order_address.district_name +order_address.city_name + order_address.address_details + ''">
                      <div class="one_line_hidden">
                        {{ order_address.address_details ? order_address.province_name +order_address.district_name +order_address.city_name + order_address.address_details : "-" }}
                      </div>
                    </el-tooltip>
                  </el-descriptions-item>

                </el-descriptions>
              </div>
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">订单商品信息</div>
                </div>
                <div class="right"></div>
              </div>
              <div style="padding: 0 10px">
                <el-descriptions :column="2">
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="购物单号">
                    <span style="color: #0076f6;font-weight: 500;">
                      {{
                    order_detail.order_trade_no ? order_detail.order_trade_no : "-"
                  }}
                    </span>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="创建时间">
                    {{
                    order_detail.created_at ? order_detail.created_at : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="订单状态">
                    <div style="color: #0076f6;font-weight: 500;">
                      <span>申请售后 -</span>

                      <span v-if="detailstrfund.status == 0">申请中</span>
                      <span v-if="detailstrfund.status == 1">处理中</span>
                      <span v-if="detailstrfund.status == 2">处理完成</span>
                      <span v-if="detailstrfund.status == 3">审核未通过</span>
                      <span v-if="detailstrfund.status == 4">申请取消</span>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="物流状态">
                    <div style="color: #0076f6;font-weight: 500;">
                      <span v-if="order_detail.delivery_status == 0">未发货</span>
                      <span v-if="order_detail.delivery_status == 1">已发货</span>
                      <span v-if="order_detail.delivery_status == 2">已收货</span>
                    </div>
                  </el-descriptions-item>

                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品分类">
                    {{order_goods.category1_name}} {{order_goods.category2_name}}
                    {{order_goods.category3_name}}
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品名称">

                    <el-tooltip placement="top-start" :content="order_goods.goods_name + ''">
                      <div class="one_line_hidden">
                        {{ order_goods.goods_name ? order_goods.goods_name : "-" }}
                      </div>
                    </el-tooltip>

                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品图片">
                    <div style="width: 40px; height: 40px">
                      <el-image :src="
                        order_goods.main_image
                          ? order_goods.main_image
                          : '-'
                      " :preview-src-list="[
                        order_goods.main_image
                          ? order_goods.main_image
                          : '-',
                      ]" />
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品规格">
                    {{
                    order_goods.sku_name
                      ? order_goods.sku_name
                      : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="购买数量">
                    {{
                    order_detail.buy_number ? order_detail.buy_number : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品售价">
                    <span v-if="order_detail.pay_type == 1">{{order_detail.price_unit}}<span
                        style="font-size: 12px;">￥</span></span>
                    <span v-if="order_detail.pay_type == 2">{{order_detail.points_unit}}积分</span>
                    <span v-if="order_detail.pay_type == 3">{{order_detail.coupon_unit}}提货券</span>
                    <span v-if="order_detail.pay_type == 4">{{order_detail.points_unit}}积分 +
                      {{order_detail.coupon_unit}}提货券</span>
                    <span v-if="order_detail.pay_type == 5">{{order_detail.price_unit}}<span
                        style="font-size: 12px;">￥</span> + {{order_detail.points_unit}}积分
                    </span>
                    <span v-if="order_detail.pay_type == 6">{{order_detail.price_unit}}<span
                        style="font-size: 12px;">￥</span> + {{order_detail.coupon_unit}}提货券
                    </span>
                    <span v-if="order_detail.pay_type == 7">{{order_detail.price_unit}}<span
                        style="font-size: 12px;">￥</span> + {{order_detail.coupon_unit}}提货券 +
                      {{order_detail.points_unit}}积分</span>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="实付款">
                    <span v-if="order_detail.pay_total > 0">
                      ￥{{order_detail.pay_total}}
                    </span>
                    <span v-if="order_detail.coupon_total > 0">
                      &nbsp;&nbsp;&nbsp;&nbsp;{{order_detail.coupon_total}}提货券
                    </span>
                    <span v-if="order_detail.points_total > 0">
                      &nbsp;&nbsp;&nbsp;&nbsp;{{order_detail.points_total}}积分
                    </span>

                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="支付方式">
                    <span v-if="order_detail.pay_type == 1">现金</span>
                    <span v-if="order_detail.pay_type == 2">积分</span>
                    <span v-if="order_detail.pay_type == 3">提货券</span>
                    <span v-if="order_detail.pay_type == 4">积分 + 提货券</span>
                    <span v-if="order_detail.pay_type == 5">积分 + 现金</span>
                    <span v-if="order_detail.pay_type == 6">提货券 + 现金</span>
                    <span v-if="order_detail.pay_type == 7">现金 + 提货券 + 积分</span>
                  </el-descriptions-item>

                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="所属商户">
                    <span v-if="order_merchant_info.length == 0">自营</span>
                    <span v-else>{{order_merchant_info.name}}</span>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="供货商">
                    <span style="color: #0076f6;font-weight: 500;">
                      {{
                       detailsInfodent.supplier_info ? detailsInfodent.supplier_info.name : "-"
                     }}
                    </span>
                    <span v-if="detailsInfodent.supplier_info">{{'(id:' +detailsInfodent.supplier_info.id +')'}}</span>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div v-if="activeNames == 'refound_information'">
              <div>
                <div class="informationTitleView">
                  <div class="leftBox">
                    <div class="leftborder"></div>
                    <div class="text">售后信息</div>
                  </div>
                  <div class="right"></div>
                </div>
                <div style="padding: 0 10px">
                  <el-descriptions :column="2">
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后时间">
                      {{
                      detailstrfund.created_at ? detailstrfund.created_at : "-"
                    }}</el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后类别">
                      <div style="color: #0076f6;" v-if="detailstrfund.type == 1">仅退款</div>
                      <div style="color: #0076f6;" v-if="detailstrfund.type == 2">退货退款</div>
                      <div style="color: #0076f6;" v-if="detailstrfund.type == 3">换货</div>

                    </el-descriptions-item>

                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后原因">


                      <el-tooltip placement="top-start" :content="detailsInfo.apply_reason + ''">
                        <div class="one_line_hidden">
                          {{ detailsInfo.apply_reason ? detailsInfo.apply_reason : "-" }}
                        </div>
                      </el-tooltip>

                    </el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后图片">
                      <div v-for="(item, index) in detailsInfo.apply_imgs
                          ? detailsInfo.apply_imgs
                          : []" :key="index" style="width: 40px; height: 40px; margin: 0 5px">
                        <el-image :src="item" :preview-src-list="detailsInfo.apply_imgs"> </el-image>
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <!-- 售后记录 -->
                <div class="informationTitleView">
                  <div class="leftBox">
                    <div class="leftborder"></div>
                    <div class="text">售后记录</div>
                  </div>
                  <div class="right"></div>
                </div>
                <!--  -->
                <el-table :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }" highlight-current-row :data="recordList" style="width: 100%" v-loading="recordLoading">
                  <el-table-column align="center" width="100" prop="id" label="ID">
                  </el-table-column>
                  <el-table-column align="center" width="150" prop="created_at" label="处理时间">
                  </el-table-column>
                  <el-table-column align="center" prop="tag_name" label="操作角色">
                    <template slot-scope="scope">
                      <span v-if="scope.row.from_type == 1">平台</span>
                      <span v-if="scope.row.from_type == 2">供货商</span>
                      <span v-if="scope.row.from_type == 3">用户</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="admin_name" label="售后人员">
                    <template slot-scope="scope">
                      <span>{{scope.row.admin_name ? scope.row.admin_name : '-'}}</span>

                    </template>

                  </el-table-column>
                  <el-table-column align="center" prop="abst" label="售后状态">
                    <template slot-scope="scope">
                      <el-tooltip placement="top-start" :content="scope.row.abst + ''">
                        <div class="one_line_hidden">
                          {{ scope.row.abst ? scope.row.abst : "-" }}
                        </div>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="处理说明" min-width="70" align="center">
                    <template slot-scope="scope">
                      <el-tooltip placement="top-start" :content="scope.row.remark + ''">
                        <div class="one_line_hidden">
                          {{ scope.row.remark ? scope.row.remark : "-" }}
                        </div>
                      </el-tooltip>
                    </template>
                  </el-table-column>

                  <el-table-column align="center" fixed="right" prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-button style="margin-right: 10px" type="primary" size="mini" @click="puttagsWay(scope.row)">
                        详情
                      </el-button>

                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-scrollbar>

      </div>
    </el-drawer>
    <!--  -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="售后详情" size="50%" :withHeader="false"
      :visible.sync="detailsafterDrawer" @close="afterClose" :show-close="true">
      <div style="position: relative">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 105px)">
          <div class="drawerTitle">
            <span>售后详情</span>
            <div class="close" @click="afterClose">
              <i class="el-icon-close" style="font-size: 24px;"></i>
            </div>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">售后信息</div>
            </div>
            <div class="right"></div>
          </div>
          <div style="padding: 0 10px;">
            <el-descriptions :column="2">
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="ID">
                {{afterinformation.id}}</el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="处理时间">
                {{
                afterinformation.created_at ? afterinformation.created_at : "-"
              }}</el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="操作角色">
                <span v-if="afterinformation.from_type == 1">平台</span>
                <span v-if="afterinformation.from_type == 2">供货商</span>
                <span v-if="afterinformation.from_type == 3">用户</span>
              </el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="售后人员">
                <span>{{afterinformation.admin_name ? afterinformation.admin_name : '-'}}</span>
              </el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="售后状态">
                <span>{{afterinformation.abst ? afterinformation.abst : '-'}}</span>
              </el-descriptions-item>

              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="售后图片">
                <div v-for="(items,index) in afterinformation.imgs" :key="index">
                  <div style="width: 40px; height: 40px">
                    <el-image :src="items" />
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item :span="2" labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="处理说明">
                <el-tooltip placement="top-start" :content="afterinformation.remark + ''">
                  <div class="one_line_hidden">
                    {{ afterinformation.remark ? afterinformation.remark : "-" }}
                  </div>
                </el-tooltip>
              </el-descriptions-item>
            </el-descriptions>
          </div>

        </el-scrollbar>

      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    getRefundList,
    setRefundVerify,
    setGoodsConfirm,
    addRefundNewOrder,
    setRefundBack,
    getRefundHistory,
    getadminRefundDetail
  } from "@/api/order/index";
  import {
    getGoodsList,
    getPublicSupplierAddressList,
    getShippingAddress,
  } from "@/api/index";
  import LogoUpload from "@/components/FileUpload";
  const tableTheadOption = {
    created_at: {
      label: "申请时间",
      field: "created_at",
    },
    refund_id: {
      label: "售后订单ID",
      field: "refund_id",
    },
    refund_order_no: {
      label: "售后单号",
      field: "refund_order_no",
    },
    trade_no: {
      label: "商品订单号",
      field: "trade_no",
    },
    pay_order_no: {
      label: "支付单号",
      field: "pay_order_no",
    },
    goods_id: {
      label: "商品ID",
      field: "goods_id",
    },
    goods_name: {
      label: "商品名称",
      field: "goods_name",
    },
    goods_main_image: {
      label: "商品主图",
      field: "goods_main_image",
    },
    user_nickname: {
      label: "用户昵称",
      field: "user_nickname",
    },
    type: {
      label: "售后类别",
      field: "type",
    },
    apply_reason: {
      label: "售后原因",
      field: "apply_reason",
    },
    apply_imgs: {
      label: "售后图片",
      field: "apply_imgs",
    },
    price_unit: {
      label: "购买单价",
      field: "price_unit",
    },
    refund_number: {
      label: "退货数量",
      field: "refund_number",
    },
    price_total: {
      label: "总金额",
      field: "price_total",
    },
    points_total: {
      label: "总积分",
      field: "points_total",
    },
    coupon_total: {
      label: "总提货券",
      field: "coupon_total",
    },
    supplier_id: {
      label: "供货商ID",
      field: "supplier_id",
    },
    supplier_name: {
      label: "供货商名称",
      field: "supplier_name",
    },
    mer_id: {
      label: "商户ID",
      field: "mer_id",
    },
    mer_name: {
      label: "商户名称",
      field: "mer_name",
    },

    // product_id: {
    //   label: "规格ID",
    //   field: "product_id",
    // },
    product_sku: {
      label: "规格名称",
      field: "product_sku",
    },
    // product_unit: {
    //   label: "规格单位",
    //   field: "product_unit",
    // },
    // shouhoujilu: {
    //   label: "处理记录",
    //   field: "shouhoujilu",
    // },
    product_retail_price: {
      label: "规格零售价",
      field: "product_retail_price",
    },
  };
  const allTableThead = [
    "created_at",
    "apply_reason",
    "apply_imgs",
    "refund_id",
    "user_nickname",
    "refund_order_no",
    "pay_order_no",
    "price_unit",
    "refund_number",
    "price_total",
    "points_total",
    "coupon_total",
    "supplier_id",
    "supplier_name",
    "mer_id",
    "mer_name",
    "goods_id",
    "goods_name",
    "goods_main_image",
    // "product_id",
    "product_sku",
    // "product_unit",
    "product_retail_price",
    // "shouhoujilu",
    "type",
  ];
  const defaultTableThead = [
    "refund_order_no",
    "trade_no",
    "goods_name",
    "type",
    "apply_reason",
    "user_nickname",

    // "apply_imgs",

    "created_at",

    // "goods_main_image",
    // "product_sku",
    // "shouhoujilu",

  ];
  export default {
    components: {
      LogoUpload
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
      },
    },
    data() {
      return {
        detailsafterDrawer: false,
        activeNames: "order_details",
        // 默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        searchDisplay: false,
        searchForm: {
          status: "", // 售后状态检索：0=发起申请；1=处理中；2=处理完成；3=审核未通过；4=取消申请
          refund_order_no: "", // 根据退款订单号筛选
          order_trade_no: "", // 根据订单流水号检索
          pay_order_no: "", // 根据订单支付单号检索
          pay_service: "", // 根据支付方式检索：1=余额支付；2=支付宝；3=微信
          user_id: "", // 根据用户ID筛选
          phone_number: "", // 收货人电话检索
          recipient: "", // 收货人姓名检索
          goods_id: "", // 商品ID检索
          goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          mer_id: "", // 店铺/商户ID检索（0=平台自营）
          create_time_start: "", // 申请起始时间（例：2023-10-01 12:20）
          create_time_end: "", // 	申请截至时间（例：2023-10-02 12:20）
          verify_time_start: "", // 审核起始时间（例：2023-10-01 12:20）
          verify_time_end: "", // 审核截至时间（例：2023-10-02 12:20）
          complete_time_start: "", // 退款完成起始时间（例：2023-10-01 12:20）
          complete_time_end: "", // 退款完成截至时间（例：2023-10-02 12:20）
          pay_time_start: "", // 支付起始时间
          pay_time_end: "", // 支付截至时间
          pageSize: 10,
          page: 1,
        },
        create_time: [],
        verify_time: [],
        complete_time: [],
        pay_time: [],
        pickerOptions: {
          shortcuts: [{
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        RefundList: [],
        total: 0,
        aftersalesDialog: false,
        aftersalesLoading: false,
        aftersalesForm: {
          refund_id: "", // 售后订单ID
          status: 1, // 平台处理状态：1=同意售后申请；2=拒绝售后申请
          remark: "", // 处理备注/意见
          is_lock: "", // （拒绝售后申请）是否锁定订单：1=锁定；0=不锁定
          return_type: 2, // （同意售后申请 - 退换货必填）用户退回的对象：1=退回给平台，2=退回给原供货商
          return_address_id: "", // （同意售后申请 - 退换货必填）用户退回的地址【若是平台，选择平台的地址；若是供货商，选择供货商的退回地址】
        },

        orderInfo: {}, // 当亲操作的订单信息
        aftersalesRules: {
          status: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择审核状态"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          is_lock: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.aftersalesForm.status == 2) {
                if (value === "") {
                  callback(new Error("请选择是否锁定订单"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          return_type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.aftersalesForm.status == 1 && this.orderInfo.type != 1) {
                if (value === "") {
                  callback(new Error("请选择退回渠道"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          return_address_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (
                this.aftersalesForm.status == 1 &&
                this.orderInfo.type !== 1
              ) {
                if (value === "") {
                  callback(new Error("请选择退回渠道地址"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        confirmDialog: false,
        confirmLoading: false,
        confirmForm: {
          refund_id: "",
          refund_number: "",
          remark: "",
          imgs: "",
        },
        imgs: [],
        confirmRules: {
          refund_number: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入收到货物数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        exchangeDialog: false,
        exchangeLoading: false,
        exchangeSelectloading: false,
        GoodsList: [],
        exchangeForm: {
          refund_id: "",
          product_id: "",
          buy_number: "",
          remark: "",
        },
        goodsId: "",
        exchangeRules: {
          goodsId: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择商品"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          buy_number: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入商品数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        refundDialog: false,
        refundLoading: false,
        orderform:{},
        refundform: {
          refund_id: "",
          refund_number: "",
          price_total: "",
          points_total: "",
          coupon_total: "",
          remark: "",
        },
        refundRules: {
          refund_number: [{
            required: false,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入退单数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
          price_total: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          points_total: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          coupon_total: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
        },
        recordLoading: false,
        recordDialog: false,
        recordList: [],

        detailsDrawer: false,
        detailsLoading: false,
        detailsInfo: {},
        detailsInfodent: {},
        order_goods: {},
        order_detail: {},
        order_merchant_info: {},
        order_address: {},
        detailstrfund: {},
        supplierAddressList: [], // 供货商地址
        supplierLoading: false,
        ShippingAddressList: [], // 平台地址
        afterinformation: {}
      };
    },
    created() {
      this.getListWay();
    },
    methods: {
      puttagsWay(row) {
        this.afterinformation = row
        this.detailsafterDrawer = true
      },
      afterClose() {
        this.detailsafterDrawer = false
      },
      getListWay() {
        this.loading = true;
        getRefundList(this.searchForm)
          .then((res) => {
            this.loading = false;
            this.RefundList = res.data.list;
            this.total = res.data.total;
          })
          .catch((err) => {
            this.loading = false;
            this.$messages.error(err.msg);
          });
      },
      resetting() {
        this.searchForm = {
          status: "", // 售后状态检索：0=发起申请；1=处理中；2=处理完成；3=审核未通过；4=取消申请
          refund_order_no: "", // 根据退款订单号筛选
          order_trade_no: "", // 根据订单流水号检索
          pay_order_no: "", // 根据订单支付单号检索
          pay_service: "", // 根据支付方式检索：1=余额支付；2=支付宝；3=微信
          user_id: "", // 根据用户ID筛选
          phone_number: "", // 收货人电话检索
          recipient: "", // 收货人姓名检索
          goods_id: "", // 商品ID检索
          goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          mer_id: "", // 店铺/商户ID检索（0=平台自营）
          create_time_start: "", // 申请起始时间（例：2023-10-01 12:20）
          create_time_end: "", // 	申请截至时间（例：2023-10-02 12:20）
          verify_time_start: "", // 审核起始时间（例：2023-10-01 12:20）
          verify_time_end: "", // 审核截至时间（例：2023-10-02 12:20）
          complete_time_start: "", // 退款完成起始时间（例：2023-10-01 12:20）
          complete_time_end: "", // 退款完成截至时间（例：2023-10-02 12:20）
          pay_time_start: "", // 支付起始时间
          pay_time_end: "", // 支付截至时间
          pageSize: 10,
          page: 1,
        };
        this.create_time = [];
        this.pay_time = [];
        this.getListWay();
      },
      create_timeWay(vla) {
        this.searchForm.create_time_start = vla[0];
        this.searchForm.create_time_end = vla[1];
      },
      complete_timeWay(vla) {
        this.searchForm.complete_time_start = vla[0];
        this.searchForm.complete_time_end = vla[1];
      },
      verify_timeWay(vla) {
        this.searchForm.verify_time_start = vla[0];
        this.searchForm.verify_time_end = vla[1];
      },
      pay_timeWay(vla) {
        this.searchForm.pay_time_start = vla[0];
        this.searchForm.pay_time_end = vla[1];
      },
      drawerHandle(row) {
        this.orderInfo = row;
        console.log(this.orderInfo);
        this.aftersalesForm.refund_id = row.refund_id;
        if (this.orderInfo.type == 1) {
          this.aftersalesForm.return_type = "";
        }
        this.return_typeChange(2);
        this.aftersalesDialog = true;
        this.aftersalesLoading = false;
      },
      statusWay(val) {
        if (val == 2) {
          this.aftersalesForm.is_lock = 0;
        } else {
          this.aftersalesForm.is_lock = "";
        }
      },
      //关闭详情弹窗
      addressClose() {
        this.detailsDrawer = false
      },
      update_details() {
        this.detailsLoading = true
        getadminRefundDetail({
          refund_id: this.detailsInfo.refund_id
        }).then((res) => {
          this.detailsInfodent = res.data
          this.order_merchant_info = res.data.merchant_info
          this.detailstrfund = res.data.refund
          this.order_address = res.data.user_order_address
          this.order_detail = res.data.buy_order
          this.order_goods = res.data.goods
          this.detailsLoading = false
        });
      },
      detailsDrawerWay(row) {
        this.detailsInfo = JSON.parse(JSON.stringify(row));
        this.detailsDrawer = true
        this.detailsLoading = true
        this.activeNames = "order_details"
        getadminRefundDetail({
          refund_id: row.refund_id
        }).then((res) => {
          this.detailsInfodent = res.data
          this.order_merchant_info = res.data.merchant_info
          this.detailstrfund = res.data.refund
          this.order_address = res.data.user_order_address
          this.order_detail = res.data.buy_order
          this.order_goods = res.data.goods
          this.detailsLoading = false
        });
      },
      aftersalesClose() {
        this.aftersalesForm = {
          refund_id: "", // 售后订单ID
          status: 1, // 平台处理状态：1=同意售后申请；2=拒绝售后申请
          remark: "", // 处理备注/意见
          is_lock: "", // （拒绝售后申请）是否锁定订单：1=锁定；0=不锁定
          return_type: 2, // （同意售后申请 - 退换货必填）用户退回的对象：1=退回给平台，2=退回给原供货商
          return_address_id: "", // （同意售后申请 - 退换货必填）用户退回的地址【若是平台，选择平台的地址；若是供货商，选择供货商的退回地址】
        };
        this.aftersalesDialog = false;
      },
      return_typeChange(val) {
        this.aftersalesForm.return_address_id = "";
        if (val == 1) {
          this.supplierRemoteMethods();
        } else {
          this.supplierRemoteMethod(this.orderInfo.supplier_id);
        }
      },
      supplierRemoteMethod(query) {
        this.supplierLoading = true;
        getPublicSupplierAddressList({
          supplier_id: query
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.supplierLoading = false;
            return this.$messages.error(res.msg);
          }
          if(res.data.list.length == 0){
            return this.$messages.error('请去添加退回地址!');
          }
          res.data.list.forEach((item) => {
            if (item.is_default == 1) {
              this.aftersalesForm.return_address_id = item.id;
            }
          });
          this.supplierAddressList = res.data.list;
          if (!this.aftersalesForm.return_address_id) {
            this.aftersalesForm.return_address_id = res.data.list[0].id;
          }
          this.supplierLoading = false;
        });
      },
      supplierRemoteMethods() {
        this.supplierLoading = true;
        getShippingAddress().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.supplierLoading = false;
            return this.$messages.error(res.msg);
          }
          res.data.list.forEach((item) => {
            if (item.is_default == 1) {
              this.aftersalesForm.return_address_id = item.id;
            }
          });
          this.supplierAddressList = res.data.list;
          if (!this.aftersalesForm.return_address_id) {
            this.aftersalesForm.return_address_id =
              res.data.list[0].id;
          }
          this.supplierLoading = false;
        });
      },
      aftersalesSubmit() {
        this.$refs.aftersalesForm.validate((valid) => {
          if (valid) {
            this.aftersalesLoading = true;
            setRefundVerify(this.aftersalesForm).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.aftersalesLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.aftersalesLoading = false;
              this.aftersalesDialog = false;
              this.getListWay();
              this.update_details()
            });
          } else {
            return false;
          }
        });
      },

      confirmClose() {
        this.confirmForm = {
          refund_id: "",
          refund_number: "",
          remark: "",
          imgs: "",
        };
        this.imgs = [];
        this.confirmDialog = false
      },
      imgsCallback(file) {
        this.imgs = file;
      },
      confirmHandle(row) {
        this.confirmForm.refund_id = row.refund_id;
        this.confirmForm.refund_number = row.refund_number;
        this.confirmDialog = true;
      },
      confirmSubmit() {
        this.$refs.confirmForm.validate((valid) => {
          if (valid) {
            this.confirmLoading = true;
            var arr = [];
            this.imgs.forEach((item) => {
              arr.push(item.url);
            });
            this.confirmForm.imgs = arr.toString();
            setGoodsConfirm(this.confirmForm).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.confirmLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.confirmLoading = false;
              this.confirmDialog = false;
              this.getListWay();
              this.update_details()
            });
          } else {
            return false;
          }
        });
      },
      exchangeHandle(row) {
        this.exchangeDialog = true;
        this.exchangeLoading = true;
        this.exchangeForm.refund_id = row.refund_id;
        getGoodsList({
          count: 20,
          page: 1
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.GoodsList = [];
            this.exchangeLoading = false;
            return this.$messages.error(res.msg);
          }
          this.exchangeLoading = false;
          this.GoodsList = res.data.list;
        });
      },
      exchangeClose() {
        this.exchangeForm = {
          refund_id: "",
          product_id: "",
          buy_number: "",
          remark: "",
        };
        this.exchangeDialog = false;
      },
      remoteMethod(query) {
        this.exchangeSelectloading = true;
        getGoodsList({
          count: 20,
          page: 1,
          keywords: query
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.exchangeSelectloading = false;

            this.GoodsList = [];
            return this.$messages.error(res.msg);
          }
          this.exchangeSelectloading = false;
          this.GoodsList = res.data.list;
        });
      },
      exchangeGoodsWay(val) {
        this.exchangeForm.product_id = val[0].id;
      },
      exchangeSubmit() {
        this.$refs.exchangeForm.validate((valid) => {
          if (valid) {
            this.aftersalesLoading = true;
            addRefundNewOrder(this.exchangeForm).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.aftersalesLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.aftersalesLoading = false;
              this.exchangeDialog = false;
              this.getListWay();
              this.update_details()
            });
          }
        });
      },
      refundHandle(row) {
        this.refundform.refund_id = row.refund_id;
        this.refundform.refund_number = row.refund_number;
        this.refundform.price_total = row.product_retail_price;
        this.refundform.points_total = row.points_total;
        this.refundform.coupon_total = row.coupon_total;

        this.orderform.price_total = row.product_retail_price;
        this.orderform.points_total = row.points_total;
        this.orderform.coupon_total = row.coupon_total;
        this.refundDialog = true;
      },
      refundclose() {
        this.refundDialog = false
      },
      refundSubmit() {
        this.$refs.refundform.validate((valid) => {
          if (valid) {
            this.refundLoading = true;
            setRefundBack(this.refundform).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.refundLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.refundDialog = false;
              this.refundform = {
                detail_id: "",
                price_total: "",
                points_total: "",
                coupon_total: "",
                reason: "",
              };
              this.getListWay();
              this.update_details()
            });
          } else {
            return false;
          }
        });
      },
      infotabshandleClick() {
        if (this.activeNames == "refound_information") {
          this.recordDialogWay(this.detailsInfo);
        }
      },
      recordDialogWay(row) {
        this.recordLoading = true;
        getRefundHistory({
          refund_id: row.refund_id
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.recordLoading = false;
            return this.$messages.error(res.msg);
          }
          this.recordLoading = false;
          this.recordList = res.data;
        });
      },
    },
  };
</script>

<style>
  #addgoods .el-upload--picture-card {
    width: 90px !important;
    height: 90px !important;
    line-height: 90px;
  }

  #addgoods .el-upload-list--picture-card .el-upload-list__item-actions {
    width: 90px !important;
    height: 90px !important;
  }

  #addgoods .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 90px !important;
    height: 90px !important;
  }

  #addgoods .el-upload-list--picture-card .el-upload-list__item {
    width: 90px !important;
    height: 90px !important;
  }
</style>
<style lang="scss" scoped>
  .refund_tracking_number {
    font-size: 15px;
    font-weight: 600;
  }

  .after_sales_status {
    display: flex;
    font-size: 14px;
    margin-top: 20px;

    .after_sales {
      color: #666;
      margin-bottom: 10px;
    }

    .status {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100px;
      justify-content: flex-start;
      margin-right: 20px;
    }
  }

  .orderstatus {
    color: #bd3124;
    font-weight: 600;
  }

  .warningtips {
    margin-bottom: 30px;
    color: #333;
    background-color: #d4e3fc;
    font-weight: 600;
    font-size: 12px;
    padding: 15px 10px 15px 10px;
  }
</style>
